<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description"  content=""/>
<meta name="keywords" content=""/>
<meta name="robots" content="ALL,FOLLOW"/>
<meta name="Author" content="AIT"/>
<meta http-equiv="imagetoolbar" content="no"/>
<title>TERMINATOR: Charts</title>

<link rel="stylesheet" href="public/css/reset.css" type="text/css"/>
<link rel="stylesheet" href="public/css/screen.css" type="text/css"/>
<link rel="stylesheet" href="public/css/fancybox.css" type="text/css"/>
<link rel="stylesheet" href="public/css/jquery.wysiwyg.css" type="text/css"/>
<link rel="stylesheet" href="public/css/jquery.ui.css" type="text/css"/>
<link rel="stylesheet" href="public/css/visualize.css" type="text/css"/>
<link rel="stylesheet" href="public/css/visualize-light.css" type="text/css"/>
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="public/css/ie7.css" />
<![endif]-->	
</head>

<body>

<div class="pagetop">
	<div class="head pagesize"> <!-- *** head layout *** -->
		<div class="head_top">
			<div class="topbuts">
				<ul class="clear">
				<li><a href="#">View Site</a></li>
				<li><a href="#">Messages</a></li>
				<li><a href="#">Settings</a></li>
				<li><a href="login.html" class="red">Logout</a></li>
				</ul>
				
				<div class="user clear">
					<img src="public/images/avatar.jpg" class="avatar" alt="" />
					<span class="user-detail">
						<span class="name">Welcome Arnold</span>
						<span class="text">Logged as admin</span>
						<span class="text">You have <a href="#">5 messages</a></span>
					</span>
				</div>
			</div>
			
			<div class="logo clear">
			<a href="index.html" title="View dashboard">
				<img src="public/images/logo_earth.png" alt="" class="picture" />
				<span class="textlogo">
					<span class="title">TERMINATOR</span>
					<span class="text">admin template</span>
				</span>
			</a>
			</div>
		</div>
		
		<div class="menu">
			<ul class="clear">
			<li><a href="index.html">Dashboard</a></li>
			<li><a href="articles.html">Articles</a></li>
			<li>
				<a href="styles.html">Styles</a>
				<ul>
					<li><a href="boxes.html">Content Boxes</a></li>
					<li><a href="columns.html">Columns</a>
						<ul>
							<li><a href="columns1.html">Boxes in Columns</a></li>
							<li><a href="columns2.html">Columns in Boxes</a></li>
						</ul>
					</li>
					<li><a href="forms.html">Forms</a></li>
				</ul>				
			</li>
			<li><a href="tables.html">Tables</a></li>
			<li class="active"><a href="charts.html">Charts</a></li>
			<li><a href="gallery.html">Image Gallery</a></li>
			<li><a href="settings.html">Settings</a></li>
			</ul>
		</div>
	</div>
</div>
<div class="breadcrumb">
	<div class="bread-links pagesize">
		<ul class="clear">
		<li class="first">You are here:</li>
		<li><a href="#">Charts</a></li>
		</ul>
	</div>
</div>
	
<div class="main pagesize"> <!-- *** mainpage layout *** -->
	<div class="main-wrap">
		<div class="page clear">
			<h1>Chart Examples <a href="#modal-label" class="label modal-link">HELP</a></h1>
			<p>You can see four types of charts here. Click on the tab to see other type of chart. Charts can be used without table when you set the display: none; style on it. More options and working with these charts are described in the documentation.</p>    

			<!-- MODAL WINDOW -->
			<div id="modal-label" class="modal-window">
				<div class="notification note-attention">
					<a href="#" class="close" title="Close notification"><span>close</span></a>
					<span class="icon"></span>
					<p><strong>Attention:</strong> More about settings of modal windows is described in Dashboard - Open Modal icon.</p>
				</div>
				<h2>Modal Window : size undefined (auto)</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, lorem id hendrerit sodales, nisl felis sollicitudin lacus, et facilisis felis quam at quam. Nullam vel nunc at sapien sagittis feugiat. Vestibulum est eros, condimentum ac sodales vel, iaculis vitae neque.</p>
				<p>Nam nisl odio, scelerisque non venenatis quis, venenatis a leo. Cras non vehicula justo. Nam vel arcu sem. Suspendisse quam enim, dictum quis lacinia sed, lobortis eget libero. Suspendisse potenti. Suspendisse et ante vitae turpis vestibulum fermentum nec nec elit. Suspendisse ullamcorper lacus in arcu mollis fringilla porta mi placerat. Ut at elit non diam tristique scelerisque. </p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, lorem id hendrerit sodales, nisl felis sollicitudin lacus, et facilisis felis quam at quam. Nullam vel nunc at sapien sagittis feugiat. Vestibulum est eros, condimentum ac sodales vel, iaculis vitae neque.</p>
			</div>

			<!-- CONTENT BOXES -->
			<div class="content-box">
			<div class="box-body">
				<div class="box-header clear">
					<ul class="tabs clear">
						<li><a href="#chart-bar">Bar</a></li>
						<li><a href="#chart-line">Line</a></li>
						<li><a href="#chart-area">Area</a></li>
						<li><a href="#chart-pie">Pie</a></li>
					</ul>
					<h2>Charts</h2>
				</div><!-- box-header -->
				<div class="box-wrap clear">
					<div id="chart-bar">
						<div class="chart-wrap">
								<table class="visualize1">
									<caption>Bar Chart Title</caption>
									<thead>
										<tr>
											<td></td>
											<th scope="col">January</th>
											<th scope="col">February</th>
											<th scope="col">March</th>
											<th scope="col">April</th>
											<th scope="col">May</th>
											<th scope="col">June</th>
											<th scope="col">July</th>
											<th scope="col">August</th>
											<th scope="col">September</th>
											<th scope="col">October</th>
											<th scope="col">November</th>
											<th scope="col">December</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">Visits</th>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>232</td>
											<td>245</td>
										</tr>
										<tr>
											<th scope="row">Sales</th>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>148</td>
											<td>185</td>
										</tr>
										<tr>
											<th scope="row">Complaints</th>
											<td>20</td>
											<td>27</td>
											<td>10</td>
											<td>16</td>
											<td>9</td>
											<td>12</td>
											<td>21</td>
											<td>12</td>
											<td>33</td>
											<td>23</td>
											<td>46</td>
											<td>31</td>
										</tr>
									</tbody>
								</table>				
							</div><!-- /.chart-wrap -->
					</div>
					<div id="chart-line">
						<div class="chart-wrap">
								<table class="visualize2">
									<caption>Line Chart Title</caption>
									<thead>
										<tr>
											<td></td>
											<th scope="col">Jan</th>
											<th scope="col">Feb</th>
											<th scope="col">Mar</th>
											<th scope="col">Apr</th>
											<th scope="col">May</th>
											<th scope="col">Jun</th>
											<th scope="col">Jul</th>
											<th scope="col">Aug</th>
											<th scope="col">Sep</th>
											<th scope="col">Oct</th>
											<th scope="col">Nov</th>
											<th scope="col">Dec</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">Visits</th>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>232</td>
											<td>245</td>
										</tr>
										<tr>
											<th scope="row">Sales</th>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>148</td>
											<td>185</td>
										</tr>
										<tr>
											<th scope="row">Complaints</th>
											<td>20</td>
											<td>27</td>
											<td>10</td>
											<td>16</td>
											<td>9</td>
											<td>12</td>
											<td>21</td>
											<td>12</td>
											<td>33</td>
											<td>23</td>
											<td>46</td>
											<td>31</td>
										</tr>
									</tbody>
								</table>				
						</div><!-- /.chart-wrap -->
					</div>
					<div id="chart-area">
						<div class="chart-wrap">
								<table class="visualize3">
									<caption>Area Chart Title</caption>
									<thead>
										<tr>
											<td></td>
											<th scope="col">01/2010</th>
											<th scope="col">02/2010</th>
											<th scope="col">03/2010</th>
											<th scope="col">04/2010</th>
											<th scope="col">05/2010</th>
											<th scope="col">06/2010</th>
											<th scope="col">07/2010</th>
											<th scope="col">08/2010</th>
											<th scope="col">09/2010</th>
											<th scope="col">10/2010</th>
											<th scope="col">11/2010</th>
											<th scope="col">12/2010</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">Visits</th>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>232</td>
											<td>245</td>
										</tr>
										<tr>
											<th scope="row">Sales</th>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>148</td>
											<td>185</td>
										</tr>
										<tr>
											<th scope="row">Complaints</th>
											<td>20</td>
											<td>27</td>
											<td>10</td>
											<td>16</td>
											<td>9</td>
											<td>12</td>
											<td>21</td>
											<td>12</td>
											<td>33</td>
											<td>23</td>
											<td>46</td>
											<td>31</td>
										</tr>
									</tbody>
								</table>
						</div><!-- /.chart-wrap -->
					</div>
					<div id="chart-pie">
						<div class="chart-wrap">
								<table class="visualize4">
									<caption>Pie Chart Title</caption>
									<thead>
										<tr>
											<td></td>
											<th scope="col">January</th>
											<th scope="col">February</th>
											<th scope="col">March</th>
											<th scope="col">April</th>
											<th scope="col">May</th>
											<th scope="col">June</th>
											<th scope="col">July</th>
											<th scope="col">August</th>
											<th scope="col">September</th>
											<th scope="col">October</th>
											<th scope="col">November</th>
											<th scope="col">December</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">Visits</th>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>232</td>
											<td>245</td>
										</tr>
										<tr>
											<th scope="row">Sales</th>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>148</td>
											<td>185</td>
										</tr>
										<tr>
											<th scope="row">Complaints</th>
											<td>20</td>
											<td>27</td>
											<td>10</td>
											<td>16</td>
											<td>9</td>
											<td>12</td>
											<td>21</td>
											<td>12</td>
											<td>33</td>
											<td>23</td>
											<td>46</td>
											<td>31</td>
										</tr>
									</tbody>
							</table>				
						</div><!-- /.chart-wrap -->
					</div>
				</div><!-- /.box-wrap -->														
			</div><!-- /.box-body -->
			</div><!-- /.content-box -->
			
			
			
			<div class="content-box">
			<div class="box-body">
				<div class="box-header clear">
					<ul class="tabs clear">
						<li><a href="#thick-chart-bar">Bar</a></li>
						<li><a href="#thick-chart-line">Line</a></li>
						<li><a href="#thick-chart-area">Area</a></li>
					</ul>
					<h2>Thick Charts : Too Much X-ray Values</h2>
				</div><!-- box-header -->
				<div class="box-wrap clear">
					<div id="thick-chart-bar" class="thick">
						<div class="chart-wrap">
								<table class="visualize-T1">
									<caption>Bar Chart Title</caption>
									<thead>
										<tr>
											<td></td>
											<th scope="col">01 July</th>
											<th scope="col">02 July</th>
											<th scope="col">03 July</th>
											<th scope="col">04 July</th>
											<th scope="col">05 July</th>
											<th scope="col">06 July</th>
											<th scope="col">07 July</th>
											<th scope="col">08 July</th>
											<th scope="col">09 July</th>
											<th scope="col">10 July</th>
											<th scope="col">11 July</th>
											<th scope="col">12 July</th>
											<th scope="col">13 July</th>
											<th scope="col">14 July</th>
											<th scope="col">15 July</th>
											<th scope="col">16 July</th>
											<th scope="col">17 July</th>
											<th scope="col">18 July</th>
											<th scope="col">19 July</th>
											<th scope="col">20 July</th>
											<th scope="col">21 July</th>
											<th scope="col">22 July</th>
											<th scope="col">23 July</th>
											<th scope="col">24 July</th>
											<th scope="col">25 July</th>
											<th scope="col">26 July</th>
											<th scope="col">27 July</th>
											<th scope="col">28 July</th>
											<th scope="col">29 July</th>
											<th scope="col">30 July</th>
											<th scope="col">31 July</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">Visits</th>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>203</td>
										</tr>
										<tr>
											<th scope="row">Sales</th>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>110</td>
										</tr>
									</tbody>
								</table>				
							</div><!-- /.chart-wrap -->
					</div>
					<div id="thick-chart-line" class="thick thick-line">
						<div class="chart-wrap">
								<table class="visualize-T2">
									<caption>Line Chart Title</caption>
									<thead>
										<tr>
											<td></td>
											<th scope="col">01 July</th>
											<th scope="col">02 July</th>
											<th scope="col">03 July</th>
											<th scope="col">04 July</th>
											<th scope="col">05 July</th>
											<th scope="col">06 July</th>
											<th scope="col">07 July</th>
											<th scope="col">08 July</th>
											<th scope="col">09 July</th>
											<th scope="col">10 July</th>
											<th scope="col">11 July</th>
											<th scope="col">12 July</th>
											<th scope="col">13 July</th>
											<th scope="col">14 July</th>
											<th scope="col">15 July</th>
											<th scope="col">16 July</th>
											<th scope="col">17 July</th>
											<th scope="col">18 July</th>
											<th scope="col">19 July</th>
											<th scope="col">20 July</th>
											<th scope="col">21 July</th>
											<th scope="col">22 July</th>
											<th scope="col">23 July</th>
											<th scope="col">24 July</th>
											<th scope="col">25 July</th>
											<th scope="col">26 July</th>
											<th scope="col">27 July</th>
											<th scope="col">28 July</th>
											<th scope="col">29 July</th>
											<th scope="col">30 July</th>
											<th scope="col">31 July</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">Visits</th>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>203</td>
										</tr>
										<tr>
											<th scope="row">Sales</th>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>110</td>
										</tr>
									</tbody>
								</table>				
						</div><!-- /.chart-wrap -->
					</div>
					<div id="thick-chart-area" class="thick thick-line">
						<div class="chart-wrap">
								<table class="visualize-T3">
									<caption>Area Chart Title</caption>
									<thead>
										<tr>
											<td></td>
											<th scope="col">01 July</th>
											<th scope="col">02 July</th>
											<th scope="col">03 July</th>
											<th scope="col">04 July</th>
											<th scope="col">05 July</th>
											<th scope="col">06 July</th>
											<th scope="col">07 July</th>
											<th scope="col">08 July</th>
											<th scope="col">09 July</th>
											<th scope="col">10 July</th>
											<th scope="col">11 July</th>
											<th scope="col">12 July</th>
											<th scope="col">13 July</th>
											<th scope="col">14 July</th>
											<th scope="col">15 July</th>
											<th scope="col">16 July</th>
											<th scope="col">17 July</th>
											<th scope="col">18 July</th>
											<th scope="col">19 July</th>
											<th scope="col">20 July</th>
											<th scope="col">21 July</th>
											<th scope="col">22 July</th>
											<th scope="col">23 July</th>
											<th scope="col">24 July</th>
											<th scope="col">25 July</th>
											<th scope="col">26 July</th>
											<th scope="col">27 July</th>
											<th scope="col">28 July</th>
											<th scope="col">29 July</th>
											<th scope="col">30 July</th>
											<th scope="col">31 July</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<th scope="row">Visits</th>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>220</td>
											<td>195</td>
											<td>175</td>
											<td>145</td>
											<td>212</td>
											<td>175</td>
											<td>182</td>
											<td>199</td>
											<td>215</td>
											<td>203</td>
											<td>203</td>
										</tr>
										<tr>
											<th scope="row">Sales</th>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>134</td>
											<td>129</td>
											<td>94</td>
											<td>53</td>
											<td>124</td>
											<td>92</td>
											<td>105</td>
											<td>86</td>
											<td>114</td>
											<td>110</td>
											<td>110</td>
										</tr>
									</tbody>
								</table>
						</div><!-- /.chart-wrap -->
					</div>
				</div><!-- /.box-wrap -->														
			</div><!-- /.box-body -->
			</div><!-- /.content-box -->
			

		</div><!-- end of page -->
	</div>
</div>

<div class="footer">
	<div class="pagesize clear">
		<p class="bt-space15"><span class="copy"><strong>© 2010 Copyright by <a href="http://www.ait.sk">Affinity Information Technology.</a></strong></span> Powered by <a href="#">TERMINATOR ADMIN.</a></p>
		<img src="public/images/logo_earth_bw50.png" alt="" class="block center" />
	</div>
</div>

<script type="text/javascript" src="public/js/jquery.js"></script>
<script type="text/javascript" src="public/js/jquery.visualize.js"></script>
<script type="text/javascript" src="public/js/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="public/js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript" src="public/js/jquery.fancybox.js"></script>
<script type="text/javascript" src="public/js/jquery.idtabs.js"></script>
<script type="text/javascript" src="public/js/jquery.datatables.js"></script>
<script type="text/javascript" src="public/js/jquery.jeditable.js"></script>
<script type="text/javascript" src="public/js/jquery.ui.js"></script>
<script type="text/javascript" src="public/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="public/js/jquery.validate.js"></script>

<script type="text/javascript" src="public/js/excanvas.js"></script>
<script type="text/javascript" src="public/js/cufon.js"></script>
<script type="text/javascript" src="public/js/Zurich_Condensed_Lt_Bd.js"></script>
<script type="text/javascript" src="public/js/script.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12958851-8']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>

